1. Introduction
Leeds Food Aid Network is a charity in Leeds focused on the coordination of food aid organizations and aid for those in food poverty. The Leeds Food Aid Network website serves as a resource to inform readers about where to find advice on emergency food support, and it provides resources for volunteers of partner groups (Leeds Food Aid Network, 2026).
One of the objectives of the network is to properly refer people to food resources, support rational food distribution in the city, and improve communication between partners. Websites serve as an information and networking tool for this project (Garrett, 2011).
The main target user groups of the website can be divided into two groups: front-line workers and volunteers, and common people who need food aid and those who want to help. Due to the varied needs of different user groups, the website should be user-friendly, easy to understand and use for every user group, including those with low computer skills (Norman, 2013). As Gube (2010) pointed out, “UX focuses on users’ feelings when using the system, while usability focuses on the usability and efficiency of the interface” — both dimensions will be considered in this evaluation.
2. Methods of Testing and Evaluation
In order to carry out an in-depth evaluation of the Leeds Food Aid Network website, the research utilized a combination of usability testing, heuristic evaluation and accessibility evaluation. The reason for combining these three methods can be analyzed from two aspects, that is, the user group perspective and the expert perspective, in order to make the evaluation results more comprehensive and reliable.
Usability Testing
Usability testing involves observing real users as they interact with the website, allowing researchers to identify problems. Five participants were selected and invited to take part in the research study, chosen from the main target users of the website: food aid seekers as well as volunteers. Participants were asked to complete a series of realistic tasks, such as finding the nearest food bank, obtaining donation information, and understanding the purpose of the organization (Dumas & Redish, 1993).
The test process adopted a think-aloud protocol to encourage participants to express their ideas during the operation, so as to gain an in-depth understanding of their cognitive processes, expectations and decision-making methods. All tests were completed on real devices such as laptops and mobile phones, and the test environment simulated users’ daily usage scenarios.
Heuristic Evaluation
This study is based on Nielsen's ten usability heuristic principles (Nielsen, 1994) for expert evaluation. The method identifies problems in the design, such as consistency, feedback mechanism and error prevention, by systematically comparing the interface with the established usability principle.
The reason for choosing this method is that it can efficiently find structural problems in interface design without the participation of a large number of users, which is especially suitable for early or systematic analysis. This assessment focuses on the following principles:
- Visibility of system status
- Consistency and standards
- User control and freedom
- Flexibility and efficiency of use
These principles provide a clear analytical framework for evaluating the overall usability of the website. In addition, this evaluation draws on the concept of “truck test” (Krug, 2006) to assess whether users can quickly locate on the website.
Accessibility Evaluation
Accessibility assessment is based on WCAG 2.1 (W3C, 2018) and combined with the WAVE Automated Testing Tool (WebAIM, 2024). The evaluation focuses include:
- Alt text
- Colour contrast
- Keyboard navigation
- Semantic structure
These standards are crucial to ensure that disabled users, such as those who use screen readers or rely only on keyboard operations, can access the website smoothly. The use of automated tools is combined with manual inspection to improve the accuracy and comprehensiveness of the evaluation.
Browser and Device Compatibility Testing
To comprehensively assess the website's technical robustness, functional testing was conducted across the following browser and device combinations:
- Desktop: Chrome (latest version), Safari (macOS), Windows desktop browsers
- Mobile: iPhone 16 (iOS 17, Safari), Android device (Google Pixel 7, Chrome)
Testing covered page rendering, interactive element functionality, responsive layout performance, and completion rates for core tasks.
3. Usability and User Experience
This section is structured with reference to the Usability Checklist (derived from workshop materials) and Nielsen's heuristic principles (Nielsen, 1994).
Navigation and Information Architecture
In general, the site structure is logical: different information can be found under “Food Aid,” “Donate,” and “Advice,” which is aligned with the mental models of users and corresponds to one of the heuristics, specifically “match between system and real world.” Still, it is quite inconvenient to use it on a mobile device.
Figure 1. Mobile hamburger menu showing unclear navigation structure and multiple interaction steps.
Nielsen's “flexibility and efficiency of use” heuristic principle emphasizes that the interface should meet the needs of both novice and expert users. The hamburger menu needs to be clicked three times or more to reach the donation information page, which fundamentally violates the experience principle of the most vulnerable users of the website — those who seek emergency food aid, because they are least likely to have the a priori experience of operating complex mobile menus (Norman, 2013).
This leads to a direct contradiction between the social mission of the website and its interface design. Considering that people seeking food aid often visit the website in stressful circumstances and may use mobile devices with unstable network connections, the 40% increase in mobile task completion time is particularly significant. The extension of the task completion time will not only reduce efficiency, but also cause users to completely abandon the operation — which is a failure that will have practical consequences for charity websites.
Figure 2. Task scenario showing how users navigate the homepage to locate food support information.
The think aloud protocol was applied on the test, asking users to say what they were thinking while working. The method is useful in discovering difficulties in actual use and provides a needed way to detect obstacles to user experience, which is not possible to find on expert assessments alone.
According to the Usability Checklist's “Navigation” dimension, the website exhibits the following deficiencies:
- Absence of breadcrumb navigation, making it difficult for users to understand their current location
- Menu items lacking prioritization, with urgent information not prominently highlighted
- High menu levels on mobile devices exceeds the three-click rule
User Testing Results Summary
| User ID | Task Category | Task Description | Problem | User Feedback / Observation |
|---|---|---|---|---|
| P1 | Navigation | Locating donation information on mobile | Hamburger menu depth too deep, requires multiple clicks | “I didn't know which one to click, tried several times.” |
| P2 | Navigation | Locating donation information on mobile | Menu items not prioritized | “Where is donation? I thought it was under ‘Support Us’.” |
| P3 | Navigation | Locating donation information on mobile | Hesitation, incorrect clicks | “I clicked wrong, went back and tried again.” |
| P4 | Feedback | Submitting contact form | No confirmation message | “I submitted but didn't get any feedback, not sure if it worked.” |
| P5 | Feedback | Submitting contact form | No confirmation message | Same as P4, expressed uncertainty. |
| All | Navigation | Locating donation information on mobile | Average completion time 40% longer than desktop | Observed across all participants. |
Visual Design and Consistency
The website generally performs well, but it violates the “Consistency and Standards” feature of the Usability Checklist through inconsistent visual design across pages: varying colour palettes, typography, and layout. Furthermore, some pages lack proper information structure, and the content is presented as a dense text block.
The website fails to meet the “Scanability” criterion of the Usability Checklist, as its pages lack headings, lists, and clear visual hierarchy — an omission that increases cognitive load and undermines usability, especially for users with limited technical experience.
Feedback and System Visibility
The website offers minimal feedback as a user experience. For instance, there is not any confirmation information after the form submission, and the loading status is equally vague. This goes against the “visibility of system status” principle.
In the usability evaluation, there were two respondents who were unsure whether or not the forms were submitted successfully. Their lack of confidence in further usage was associated with that. Except the problem of causing the failure of missing form confirmation, this absence has a deeper user experience dimension in Gube’s (2010) sense: users who are seeking emergency food aid — when the system fails to provide any peace of mind, may feel anxious and distrustful. In this circumstance, the emotional cost of uncertainty is much higher than that of ordinary commercial websites, so feedback is not only about solving usability problems, but also about the dignity of users.
Error Prevention and User Control
The website does not implement enough measures targeted at preventing user mistakes. If the user encounters a mistake, there is no clear sign of coming back. Moreover, it is contradictory to the principles of “error prevention” as well as “user control and freedom.” For example, when giving the donation form, the system will have prompts that if the required field is empty but the page will refresh before the user sees the error message, thus confusing the users.
4. Accessibility
This section is structured with reference to the Accessibility Checklist and WCAG 2.1 standards (W3C, 2018).
Accessibility Overview
As shown in Figure 3, the WAVE evaluation (WebAIM, 2024) highlights several accessibility issues, including structural warnings and missing semantic elements. Although the number of critical errors is relatively low, the presence of alerts indicates underlying problems in content structure and accessibility compliance.
Figure 3. WAVE accessibility evaluation overview showing multiple detected issues and structural warnings.
However, automated tools like WAVE may not be able to detect all accessibility issues, which highlights the importance of combining tool-based evaluation with manual inspection.
Colour Contrast
Although most of the text meets the contrast requirements, some elements in the home page chart do not meet the 4.5:1 standard required by WCAG 2.1 AA (W3C, 2018). As shown in Figure 4, this will reduce the reading experience of visually impaired users.
Figure 4. Contrast checker results showing insufficient colour contrast that fails WCAG 2.1 standards.
Keyboard Navigation
The website supports basic keyboard operation, but the focus indicator is not clear and inconsistent. When testing only with the keyboard, it is difficult for users to determine the current focus position. This violates the WCAG 2.4.7 (W3C, 2018) standard and affects the browsing experience of keyboard users.
Heading Structure and Semantic Markup
The website has a problem with the title structure, including multiple H1 elements and inconsistent hierarchy. This will affect the ability of assistive technology to analyse the page structure. In addition, semantic HTML elements such as <nav>, <main> and <aside> are not fully utilized, and ARIA attributes are largely missing. According to the “semantic markup” dimension in the accessibility list, it is difficult for auxiliary technology users to understand the page structure.
5. Technical Robustness and Professionalism
HTML and CSS Validation
Using the W3C tag verification service (W3C, 2018), it was found that there were many HTML errors and warnings on the homepage of the Leeds Food Aid Network, including abandoned HTML attributes, improperly nested elements, and missing language attributes. Although some of these errors may not cause obvious rendering problems in modern browsers, they indicate that the maintenance of the code base does not meet the current standards. This may lead to rendering problems on old browsers and pose risks to future maintenance.
Cross-Device Functionality
On desktop browsers (Chrome, Safari, Windows browsers), the core functions of the website run normally. However, some key interactive elements rely on mouse hover interaction, which touch devices do not support. Most notably, there is an interactive data chart on the home page, which effectively shows the coverage of the website, but relies entirely on mouse hover interaction. Therefore, touch screen and keyboard users cannot access the chart. Mobile tests confirm that the chart cannot be triggered on both iOS and Android devices.
Performance and SEO
We used PageSpeed Insights (Google, 2021) to evaluate the performance of the website. The score of the mobile version is about 65 points (out of 100). The problems found include unoptimised pictures and unused JavaScript resources. Although basic performance is acceptable, there remains room for improvement.
Search engine optimization (SEO) analysis reveals the following shortcomings:
- The
<title>element does not contain relevant keywords - Meta description is absent
- Heading hierarchy is inconsistent, affecting search engines' understanding of content structure
- Many images lack alt attributes, reducing visibility in image search
These factors collectively affect the website's search engine performance and may reduce reach among potential users.
6. Conclusion
The evaluation of the Leeds Food Aid Network website shows that the website has largely achieved its core information sharing goals, but has not met the best practice standards in several important areas.
In terms of usability, the overall navigation structure is reasonable, the homepage action entrance is clear, and users can locate key services relatively easily. However, the complex hamburger menu, the lack of user feedback mechanism, the visual inconsistency of the colour scheme and page layout seriously limit the mobile experience, which will weaken the user's sense of trust and readability. The homepage interaction chart is conceptually an effective communication tool, but its dependence on hover interaction makes it unusable for touch screen and keyboard users.
Accessibility is the most urgent area to pay attention to. Alternative text for image is generally missing, the title structure is inconsistent, and the keyboard focus indicator is insufficient, resulting in the inability to meet many WCAG 2.1 A and AA standards. These problems are particularly serious for an organization that serves socially disadvantaged groups, such as the elderly and disabled, and should be addressed as a priority.
From a technical point of view, the core functions of the website are mostly functional, but there are HTML validation errors. There is room for improvement in the speed of mobile pages. Relying on hover interaction makes it unable to work properly on touch screen devices. The SEO foundation is weak, and the heading structure and alt text problems weaken the search optimization effect.
Overall, the Leeds Food Aid website will benefit from a series of targeted accessibility improvements, mobile optimization and code review procedures. The following improvement measures are sorted according to the severity of the problem, giving priority to solving key problems affecting the completion of core user tasks, and following the WCAG 2.1 compliance priority (A-level issues take priority over level AA). The action plan summarizes the main improvement measures proposed based on the assessment results.
Action Plan
| Category | Description |
|---|---|
| Accessibility |
|
| UX/UI |
|
| Technical |
|
| Content |
|
Reference List
Dumas, J. S. and Redish, J. C. (1993) A Practical Guide to Usability Testing. Revised edition. Exeter: Intellect Books.
Garrett, J. J. (2011) The Elements of User Experience: User-Centered Design for the Web and Beyond. 2nd edition. Berkeley: New Riders.
Google (2021) ‘Page experience update and more: Google Search ranking’, Google Search Central Blog. [Online]. Available at: https://developers.google.com/search/blog/2021/04/more-details-page-experience (Accessed: 15 March 2026).
Gube, J. (2010) ‘What is user experience design? Overview, tools and resources’, Smashing Magazine. [Online]. Available at: https://www.smashingmagazine.com/2010/10/what-is-user-experience-design-overview-tools-and-resources/ (Accessed: 30 March 2026).
Krug, S. (2006) Don’t Make Me Think!: A Common Sense Approach to Web Usability. 2nd edn. Berkeley: New Riders.
Leeds Food Aid Network (2026) Home. [Online]. Available at: https://leedsfoodaidnetwork.co.uk/ (Accessed: 6 March 2026).
Nielsen, J. (1994) ‘Enhancing the explanatory power of usability heuristics’, in Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pp. 152–158. [Online]. Available at: https://doi.org/10.1145/191666.191729 (Accessed: 28 March 2026).
Norman, D. A. (2013) The Design of Everyday Things. Revised and expanded edition. New York: Basic Books.
W3C (2018) Web Content Accessibility Guidelines (WCAG) 2.1. [Online]. Available at: https://www.w3.org/TR/WCAG21/ (Accessed: 12 March 2026).
W3C (2024) Markup Validation Service. [Online]. Available at: https://validator.w3.org/ (Accessed: 30 March 2026).
WebAIM (2024) WAVE Web Accessibility Evaluation Tool. [Online]. Available at: https://wave.webaim.org/ (Accessed: 13 March 2026).
Appendix
Appendix A: Usability Testing Tasks
- Find nearest food bank
- Locate donation information
- Identify organization purpose
Appendix B: Key Observations
- Users hesitated during navigation
- Mobile menu caused confusion
- Lack of feedback reduced confidence
Appendix C: Tools Used
- WAVE Accessibility Tool
- Google PageSpeed Insights
- W3C Validator